<template>
	<view class="content font_family">
		<view class="header f_j" :style="{paddingTop:menuButtonInfo+'px'}">
			<image class="icon" src="../../static/public/back_b.png" mode="" @click="back"></image>
			<view class="search f_z_b">
        <u-icon name="volume"></u-icon>
        跟团可以包含高端酒店费用哦
			</view>
		</view>
    <view class="box_title f f_z_b">
      <view class="left f_d">
        <text class="text">探索合作酒店</text>
      </view>
      <view class="right" @click="go_more">
        <text class="text">更多</text>
        <image class="icon" src="../../static/index/more.png" mode=""></image>
      </view>
    </view>
    <view v-for="item in waterfall_list" class="hotel">
      <image :src="item.image"></image>
      <view class="title">
        <view class="line1">
          <view>{{item.title}}</view>
          <view>8.8分</view>
        </view>
        <view class="line2">
          <view class="tag">
            <view v-for="item in 3"><u-tag text="标签" type="warning" plain plainFill></u-tag></view>

          </view>
          <view class="price">
            <text class="name">价格</text>
            <text class="money">$600/晚</text>
          </view>
        </view>
      </view>
    </view>
    <view class="box_title f f_z_b">
      <view class="left f_d">
        <text class="text">服务团队</text>
      </view>
      <view class="right" @click="go_more">
        <text class="text">更多</text>
        <image class="icon" src="../../static/index/more.png" mode=""></image>
      </view>
    </view>
    <view class="travel">
      <view class="travel-item" v-for="item in 3">
        <u-icon name="photo" color="#2979ff" size="36"></u-icon>
        <view class="title">张三</view>
        <view class="intro">10年工龄</view>
      </view>
    </view>
	</view>
</template>

<script>

	import { lists,whotellists } from '@/api/index_menu/index.js'
	export default {
		data() {
			return {
				menuButtonInfo: 0,
				waterfall_list: [],
				// 请求参数
				query: {
					page: 1,
					type: 3,
					search: ''
				},
			};
		},
		computed: {

		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect().top
			// #endif
			// #ifdef H5
			this.menuButtonInfo = 20
			// #endif
			this.get_lists()
		},
		onReachBottom() {

		},
		onShareAppMessage() {

		},
		onShareTimeline() {

		},
		watch: {
			city() {

				this.get_lists()
			},
		},
		methods: {
			go(url) {
				uni.navigateTo({
					url
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 获取列表
			get_lists() {
				whotellists(this.query).then(res => {
					if (res.code == 1) {
            this.waterfall_list = res.data.data.splice(0,2)
					}
				})
			},

		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #F8F9FC;
		padding:0  30rpx;

		.header {
			padding-left: 30rpx;

			.icon {
				width: 18rpx;
				height: 36rpx;
			}

			.search {
        position: relative;
				margin-left: 40rpx;
				align-items: center;
				width: 400rpx;
				height: 68rpx;
				background: white;
				border-radius: 20rpx;
				padding: 0rpx 26rpx;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        font-size: 24rpx;


			}
      .search::after{
        content: '';
        position: absolute;
        top: 100%;
        left: 20px;
        border-width: 10px;
        border-style: solid;
        border-color: #fff transparent transparent transparent;
        filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
      }
		}
.box_title {
  margin-top: 30rpx;
  .left {
    .text {
      font-weight: 400;
      font-size: 36rpx;
      color: #000000;
      line-height: 42rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      z-index: 1;
    }

    .line {
      width: 100%;
      height: 14rpx;
      background: #FFE706;
      margin-top: -10rpx;
    }
  }

  .right {
    .text {
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      line-height: 28rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .icon {
      width: 11rpx;
      height: 19rpx;
      margin-left: 9rpx;
    }
  }
}
	}
  .hotel{
    margin-top: 30rpx;
    image{
      height: 180px;
      width: 100%;
      border-radius: 30rpx 30rpx 0 0 ;
      display: block;
    }
    .title{
      background-color: white;
      border-radius:0 0  30rpx 30rpx ;
      padding: 20rpx;
      .line1{
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .line2{
        margin-top: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .tag{
          display: flex;
          view{
            margin-right: 10rpx;
          }
        }
        .price{
          .name{
            color:gray;
            font-size: 26rpx;
          }
          .money{
            color: red;
            padding-left: 10rpx;
          }

        }
      }
    }
  }
  .travel{
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
    &-item{
      width: 210rpx;
      height: 260rpx;
      background-color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 20rpx;
      .title{
        margin-top: 10rpx;
      }
      .intro{
        margin-top: 5rpx;
        color: gray;
        font-size: 24rpx;
      }
    }
  }
</style>